<template>
    <div class="forget-container">
        <el-timeline>
            <el-timeline-item
                v-for="(item,index) of processLine"
                :key="index"
                :timestamp="item.step"
                placement="top"
                :type="item.type"
                :icon="item.icon"
                size="large"
            >
                <el-card v-if="index === 0">
                    <div slot="header" class="clearfix">
                        <span style="font-size: 16px;">{{ item.title }}</span>
                    </div>
                    <p v-if="item.account" class="account">账号: <el-button type="text">{{ item.account }}</el-button></p>
                    <el-form v-else ref="idForm" :inline="true" :model="idForm" :rules="idRules">
                        <el-form-item label="请输入账号" prop="identifierId">
                            <el-input v-model="idForm.identifierId" placeholder="ID" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitId">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>

                <el-card v-if="index === 1">
                    <div slot="header" class="clearfix">
                        <span style="font-size: 16px;">{{ item.title }}</span>
                    </div>
                    <el-form>
                        <el-form-item label="问题">
                            <span><b>{{ item.question }}</b></span>
                        </el-form-item>
                    </el-form>

                    <el-form ref="ansForm" :inline="true" :model="ansForm">
                        <el-form-item label="答案">
                            <el-tag v-if="item.questionPass" type="success" class="correct">回答正确</el-tag>
                            <el-input v-else v-model="ansForm.answer" />
                        </el-form-item>
                        <el-form-item v-if="!item.questionPass">
                            <el-button type="primary" @click="submitAnswer">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>

                <el-card v-if="index === 2">
                    <div slot="header" class="clearfix">
                        <span style="font-size: 16px;">{{ item.title }}</span>
                    </div>
                    <el-form
                        ref="pwdForm"
                        :model="pwdForm"
                        :rules="pwdRules"
                        label-position="left"
                        label-width="90px"
                        style="width: 270px"
                    >
                        <el-form-item label="新密码" prop="password">
                            <el-input v-model="pwdForm.password" type="password" />
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass">
                            <el-input v-model="pwdForm.checkPass" type="password" autocomplete="off" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="changePass">确认修改</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>

<script>
import { validateAccount } from '@/utils/validate'
import { getQuestionByUid, getTokenByAnswer, resetPassword } from '@/api/user'
import { scrollTo } from '@/utils/scroll-to'

export default {
    name: 'ForgetPass',
    data() {
        const validateIdentifierId = (rule, value, callback) => {
            if (!validateAccount(value)) {
                callback(new Error('请输入正确的用户账号ID'))
            } else {
                callback()
            }
        }
        var validatePwd = (rule, value, callback) => {
            // 基本验证
            if (value === '') {
                callback(new Error('请输入密码'))
            } else if (value.length < 6) {
                callback(new Error('密码不能小于6位'))
            } else {
                callback()
            }
        }
        var validatePwd2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.pwdForm.password) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }
        return {
            processLine: [
                {
                    step: '第一步',
                    title: '待找回账号ID',
                    account: '',
                    type: '',
                    icon: ''
                }
            ],
            idForm: {
                identifierId: undefined
            },
            ansForm: {
                answer: ''
            },
            pwdForm: {
                password: '',
                checkPass: ''
            },
            // 修改密码所用token
            token: '',
            // 确认输入账号为纯数字
            idRules: {
                identifierId: [{ required: true, trigger: 'change', validator: validateIdentifierId }]
            },
            // 确认修改密码
            pwdRules: {
                password: [
                    { validator: validatePwd, trigger: 'change' }
                ],
                checkPass: [
                    { validator: validatePwd2, trigger: ['change', 'blur'] }
                ]
            }
        }
    },
    methods: {
        submitId() {
            getQuestionByUid(this.idForm.identifierId).then(question => {
                this.processLine[0].account = this.idForm.identifierId
                this.setStepFinished(0)
                // 塞入第二个步骤
                this.processLine.push({
                    step: '第二步',
                    title: '请回答问题答案',
                    question: question,
                    questionPass: false,
                    type: '',
                    icon: ''
                })
            })
        },
        submitAnswer() {
            const _params = {
                id: this.processLine[0].account,
                answer: this.ansForm.answer
            }
            getTokenByAnswer(_params).then(token => {
                this.processLine[1].questionPass = true
                this.setStepFinished(1)
                // 设置密码修改所需token
                this.token = token
                // 塞入第三个步骤
                this.processLine.push({
                    step: '第三步',
                    title: '修改密码',
                    type: '',
                    icon: ''
                })
            }).catch(() => {
                this.ansForm.answer = ''
            })
        },
        changePass() {
            if (this.pwdForm.password === '' || this.pwdForm.password !== this.pwdForm.checkPass) {
                this.$message.error('密码信息错误!')
                return
            }
            const _data = {
                id: this.processLine[0].account,
                new_passwd: this.pwdForm.password,
                token: this.token
            }
            resetPassword(_data).then(() => {
                this.setStepFinished(2)
                this.$message.success('密码重置成功!')
                scrollTo(0, 800)
                setTimeout(() => {
                    this.$router.push('/login')
                }, 1200)
            }).catch(() => {
                this.pwdForm.password = ''
                this.pwdForm.checkPass = ''
            })
        },
        // 改变步骤圆点样式
        setStepFinished(index) {
            this.processLine[index].type = 'success'
            this.processLine[index].icon = 'el-icon-check'
        }
    }
}
</script>
<style scoped lang="scss">
.forget-container{
    min-height: 100%;
    width: 100%;
    padding-top: 80px;
    background-image: linear-gradient(-87deg, #e4ebee 0%, #f5f8f8 100%);
    .el-timeline{
        margin: 0 auto;
        width: 600px;
    }
}
.account{
    font-weight: bold;
    margin: 0;
    .el-button{
        margin-left: 10px;
    }
    .el-button--text{
        font-size: 16px;
    }
}
</style>
